import React, {useEffect, useState} from 'react';

function App(props) {
    const [num,setNum] = useState(0);
    // 注意1：以下会造成死循环
    // useEffect(()=>{
    //     console.log(111)
    //     setNum(num+1);
    // })

    // 以下解决数值重置问题,不会造成死循环
    // useEffect(()=>{
    //     setNum(num+1);
    // },[])

    // 注意2：useEffect接收的回调函数不允许是async函数，因为async函数返回的是promise
    // 而useEffect接收的回调函数要求：如果有返回值，返回值必须是一个函数（相当于componentWillUnmount）。
    // 以下有异常：
    // useEffect(async ()=>{
    //
    // })

    // 解决方案一：自调用函数
    // useEffect(()=>{
    //     (async ()=>{
    //         try{
    //             // await右侧不是promise那以会直接将await右侧的值返回
    //             const result = await 1;
    //             console.log(result);// 1
    //             // 如果右侧是一个成功的promise,那么得到的是成功promise的成功值
    //             const result2 = await Promise.resolve(100);
    //             console.log(result2);// 100
    //             // 如果右侧是一个失败的promise,那么会抛出异常,异常的值即是promise的失败值。
    //             const result3 = await Promise.reject(100);
    //             console.log(result3);
    //         }catch (err){
    //             console.log("异常",err);
    //         }
    //
    //     })();
    // })


    // 解决方案二：将async函数定义在外部
    const run = async function(){
        const result = await 100;
        console.log(result);
    }

    useEffect(()=>{
        run();
    })



    return (
        <div>
            {num}
        </div>
    );
}

export default App;